<template>
  <div class="full-container">
    <div class="user-box" @click.stop="$_router.push('/me')">
      <van-icon name="https://cdn.uj.cn/static/zhiyecn/hft-enterprise/icon_menu_me_white@3x.png?t=1" size="15"/>
      <span>我的</span>
    </div>
    <nav>
      <div class="nav-item item-course" @click="handleToZhiYe">
        <img src="https://cdn.uj.cn/static/zhiyecn/hft-enterprise/icon_menu_course@3x.png?t=1" alt="">
        <span>职训课程</span>
      </div>
      <div class="nav-item item-uni" @click="$_router.push('/course-hft')">
        <img src="https://cdn.uj.cn/static/zhiyecn/hft-enterprise/icon_menu_uni@3x.png?t=1" alt="">
        <span>房产大学</span>
      </div>
      <div class="nav-item item-ai" @click="handleToHuiDao">
        <img src="https://cdn.uj.cn/static/zhiyecn/hft-enterprise/icon_menu_ai@3x.png?t=1" alt="">
        <span>AI训练</span>
      </div>
      <div class="nav-item item-assess" @click="$_router.push('/evaluation-list')">
        <img src="https://cdn.uj.cn/static/zhiyecn/hft-enterprise/icon_menu_assess@3x.png?t=1" alt="">
        <span>职业测评</span>
      </div>
    </nav>
    <main>
      <!-- 职训课程 -->
      <section class="section-wrapper">
        <div class="title-bar">
          <span class="title-bar--title">职训课程</span>
          <span class="title-bar--more" @click="handleToZhiYe">更多<van-icon name="arrow"/></span>
        </div>
        <div class="content-box">
          <div
            class="course-item"
            v-for="(item, index) of zhiYeCourseList"
            :key="index"
            @click="handleToZhiYeCourseDetail(item)"
          >
            <van-image :src="item.pic" width="2.8rem" height="1.86rem" radius="5"/>
            <p class="ellipsis2 course-item--title">{{ item.title }}</p>
          </div>
        </div>
      </section>
      <!-- 房产大学 -->
      <section class="section-wrapper">
        <div class="title-bar">
          <span class="title-bar--title">房产大学</span>
          <span @click="$_router.push('/course-hft')" class="title-bar--more">更多<van-icon name="arrow"/></span>
        </div>
        <div class="content-box">
          <div
            class="course-item"
            v-for="(item, index) of enterpriseCourseList"
            :key="index"
            @click="handleToPlanCourseDetails(item)"
          >
            <van-image :src="item.pic" width="2.8rem" height="1.86rem" radius="5"/>
            <span class="item-tag">VIP·专享</span>
            <p class="ellipsis1 course-item--title">{{ item.title }}</p>
            <p class="ellipsis1">{{ item.viewCount || 0 }}人已学习</p>
          </div>
        </div>
      </section>
      <!-- AI训练 -->
      <section class="section-wrapper">
        <div class="title-bar">
          <span class="title-bar--title">AI训练</span>
          <span class="title-bar--more" @click="handleToHuiDao">更多<van-icon name="arrow"/></span>
        </div>
        <div class="content-box">
          <div
            class="course-item"
            v-for="(item, index) of huiDaoList"
            :key="index"
            @click="handleToHuiDao"
          >
            <van-image :src="item.talkImg" width="2.8rem" height="1.86rem" radius="5"/>
            <span class="item-tag">VIP·专享</span>
            <p class="ellipsis1 course-item--title">{{ item.talkTitle }}</p>
            <p>{{ item.learnCount || 0 }}人已练习</p>
          </div>
        </div>
      </section>

      <section class="section-wrapper">
        <div class="title-bar">
          <span class="title-bar--title">职业测评</span>
        </div>
        <div class="f-c-s content-box">
          <div
            class="f-r-s evaluation-item"
            v-for="(item, index) of evaluationList"
            :key="index"
            @click="handleToEvaluationDetails(item)"
          >
            <div class="evaluation-item--content">
              <p class="ellipsis1">{{ item.title }}</p>
              <p class="ellipsis1">{{ item.ext1 }}</p>
              <p class="ellipsis1">{{ item.remark }}</p>
            </div>
            <van-image height="2.387rem" width="2.533rem" fit="cover" :src="item.pic"/>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
import { Icon, Image, Toast } from 'vant';
import { onlineActionTypes } from "@/repo/store/online";
import PlanAPI from "@/repo/api/PlanAPI";
import EvaluationAPI from "@/repo/api/EvaluationAPI";
import { generateRouterPath, push } from "@/router/util";
import EnterpriseCourseAPI from "@/repo/api/EnterpriseCourseAPI";
import HuiDaoAPI from "@/repo/api/HuiDaoAPI";
import EvaluationList from "@/pages/evaluation/evaluation-list";
import HftApi from "@/repo/api/HftApi";
import { isAndroid, isIOS } from "@/utils/util";

export default {
  name: 'entrancePage',
  components: {
    [Icon.name]: Icon,
    [Image.name]: Image,
    EvaluationList
  },
  data() {
    return {
      zhiYeCourseList: [],
      enterpriseCourseList: [],
      evaluationList: [],
      huiDaoList: [],
      huiDaoUrl: '',
      scrollTop: 0
    };
  },

  created() {
    Toast.loading({
      forbidClick: true,
      duration: 0
    });

    Promise.all([
      this.getZhiYeCourseList(),
      this.getEnterpriseCourse(),
      this.getEvaluationList(),
      this.getHuiDaoUrl(),
      this.getHuiDaoList()
    ])
      .finally(() => Toast.clear(true));
  },

  computed: {},

  methods: {
    getZhiYeCourseList() {
      HftApi.getCourseListByHft().then(result => {
        this.zhiYeCourseList = result;
      });
    },

    /**
     * 获取企业大学课程
     * @return {Promise<void>}
     */
    getEnterpriseCourse() {
      this.$store.dispatch(`online/${ onlineActionTypes.GET_ASSOCIATION_PlAN }`)
        .then(async () => {
          let categoryList = this.$store.getters['online/associationPlanList'];
          let id = Object.values(categoryList)[1][0];
          let { responseData: { subjectList = [] } } = await PlanAPI.getPlanDetail(id);
          this.enterpriseCourseList = subjectList.slice(0, 3);
        });
    },

    /**
     * 查询会道跳转链接
     */
    getHuiDaoUrl() {
      EnterpriseCourseAPI.getHuidaoUrl().then((result) => {
        this.huiDaoUrl = result.responseData.tabUrl;
      });
    },

    /**
     * 查询会道列表
     */
    getHuiDaoList() {
      HuiDaoAPI.getHuiDaoItemList()
        .then(async result => {
          let categoryList = result || [];
          if (!categoryList.length) return;
          const { results = [] } = await HuiDaoAPI.getHuiDaoPageList(categoryList[0].id);
          this.huiDaoList = results;
        });
    },

    /**
     * 获取职业测评列表
     */
    getEvaluationList() {
      EvaluationAPI.getMyEvaluateList().then(result => {
        this.evaluationList = result.responseData.list;
      });
    },

    /**
     * 打开知业首页
     */
    handleToZhiYe() {
      let sign = this.$store.getters['memberInfo/sign'];
      this.handleToZhiYeWebView(`https://thft.zhiyecn.com/home?sign=${ sign }`);
    },

    /**
     * 打开知业课程详情
     * @param data
     */
    handleToZhiYeCourseDetail(data) {
      let sign = this.$store.getters['memberInfo/sign'];
      this.handleToZhiYeWebView(`https://thft.zhiyecn.com/course/coursedetail/${data.id}?sign=${sign}`)
    },

    handleToZhiYeWebView(url) {
      if (!window.hasOwnProperty('zshft')) return window.location.href = url;
      isIOS && window.zshft.jumpNavtiveURL(`zshft://com.dynamic?targetclass=ZhiYeWebViewController&netUrl=${ encodeURIComponent(url) }`);
      isAndroid && window.zshft.jumpNavtiveURL(`zshft://com.dynamic?targetActivity=com.haofang.hftsoftapp.ui.module.home.activity.ZalentWebActivity&urlString=${ encodeURIComponent(url) }`);
    },

    /**
     * 跳转房产大学课程详情
     * @param data
     */
    handleToPlanCourseDetails(data) {
      this.$router.push({
        path: generateRouterPath(`/course/courseDetail/${ data.id }`),
        query: {
          enterStatus: 1
        }
      });
    },

    /**
     * 跳转职业测评详情
     * @param data
     */
    handleToEvaluationDetails(data) {
      push(`/evaluation-desc/${ data.id }`);
    },

    handleToHuiDao() {
      if (!this.checkMemberStatus()) return;
      let url = `${ this.huiDaoUrl }&referrer=${ encodeURIComponent(window.location.href) }`;
      if (window.hasOwnProperty('zshft')) return window.zshft.onJsLinkHuiDao(url);
      window.location.href = url;
    },

    checkMemberStatus() {
      if (this.$store.getters['memberInfo/isOpen']) return true;
      this.$buyMemberPopup();
      return false;
    }
  }
};
</script>

<style lang="less" scoped>
.f-c-s {
  display: flex;
  flex-direction: column;
}

.f-r-s {
  display: flex;
  flex-direction: row;
}

.full-container {
  width: 100vw;
  max-width: 640px;
  min-height: 100vh;
  overflow-y: auto;
  background: #ffffff url("https://cdn.uj.cn/static/zhiyecn/hft-enterprise/home_banner.png?t=1") no-repeat;
  background-size: 100% 225px;
  position: relative;
  padding: 0 20px 50px;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;

  .user-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 9px;
    color: #ffffff;

    & > span {
      margin-top: 2px;
    }
  }

  nav {
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    height: 100px;
    box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.05);
    margin-top: 175px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .nav-item {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      img {
        pointer-events: none;
        width: 34px;
      }

      span {
        color: #101d36;
        font-size: 14px;
        font-weight: bold;
        margin-top: 13px;
      }
    }
  }

  main {
    .section-wrapper {
      .title-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 0 10px;

        .title-bar--title {
          font-size: 18px;
          font-weight: bold;
          color: #191f25;
        }

        .title-bar--more {
          font-size: 12px;
          color: #858585;
        }
      }

      .content-box {
        display: flex;
        justify-content: space-between;

        .course-item {
          position: relative;
          display: flex;
          flex-direction: column;
          width: 108px;

          .course-item--title {
            font-size: 12px;
            color: #191f25;
            font-weight: bold;
            margin-top: 10px;
          }

          .item-tag {
            position: absolute;
            top: 0;
            left: 0;
            color: #76380a;
            font-size: 9px;
            background: #ffdc99;
            border-radius: 5px 0 5px 0;
            font-weight: bold;
            padding: 0 4.5px;
          }

          p {
            color: #a3a5a8;
            font-size: 10px;
            margin-top: 5px;
          }
        }

        .evaluation-item {
          background: #f8f8f8;
          border-radius: 10px;
          overflow: hidden;
          margin-bottom: 10px;
          align-items: center;

          .evaluation-item--content {
            flex: 1;
            padding: 0 15px;
            box-sizing: border-box;

            p {
              &:first-of-type {
                font-size: 16px;
                color: #191f25;
                font-weight: bold;
              }

              &:nth-child(2) {
                font-size: 12px;
                color: #101d36;
              }

              &:last-of-type {
                color: #a3a5a8;
                font-size: 11px;
                margin-top: 8px;
              }
            }
          }

          .van-image {
            clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 20% 0%);
          }
        }
      }
    }
  }
}
</style>
